<template>
	<view class="ranking-page">
		<van-nav-bar title="摩托榜" left-text="返回" left-arrow @click-left="Back" />
		<van-tabs v-model:active="active" sticky>
			<van-tab title="人气榜"></van-tab>
			<van-tab title="品牌榜"></van-tab>
		</van-tabs>
		<!-- 排行区域 -->
		<view class="rank-wrap">
			<!-- 摩托榜 -->
			<view class="moto-item" v-for="v in moto" @click="motoSelect(v.carName,'moto')" v-show="active==0">
				<img :src="v.photo">
				<view class="info">
					<h3>{{v.carName}}</h3>
					<p>
						<text>指导价</text>
						<text class="moto-price">￥ {{v.price}} - {{v.price+15000}}</text>
					</p>
					<text>车型评分 {{random.float(1.0, 10).toFixed(1) * 1}}</text>
				</view>
			</view>
			<!-- 品牌榜 -->
			<view class="brand-item" v-for="v in brands" @click="motoSelect(v.id,'brand')" v-show="active==1">
				<img :src="v.photo" alt="">
				<text>{{v.carBrandName}}</text>
				<text>{{random.int(10000,999999)}} <van-icon name="fire" color="#FF5924" /></text>
			</view>


		</view>

	</view>
</template>

<script setup>
	// 封装请求
	import $api from '../../request/index.js'
	// ref 响应式数据
	import {
		ref
	} from 'vue'
	// 生成随机数
	import random from 'random'
	// 页面生命周期
	import {
		onLoad
	} from '@dcloudio/uni-app'

	// 实时切换
	let active = ref(0)
	// 摩托
	let moto = ref([])
	// 品牌
	let brands = ref([])

	// 获得数据
	onLoad(async () => {
		// 人气榜
		await $api.get('/moto/car/orderMarkCar').then(res => moto.value = res.data)
		// 品牌榜
		await $api.get('/moto/car/AsciiFindAllCarBrand').then(res => brands.value = res.data)
	})

	// 查找摩托
	const motoSelect = (e, type) => {
		console.log(e, type)
		let url = type == 'moto' ? '/pages/select_moto/select_moto' : '/pages/select_brand/select_brand'
		uni.navigateTo({
			url: url + '? type=' + e
		})
	}

	// 返回按钮
	const Back = () => uni.navigateBack()
</script>

<style>
	.moto-item {
		display: flex;
		padding: 40rpx 0 40rpx 40rpx;
		border-bottom: 1rpx solid #eee;
	}

	.moto-item h3 {
		padding: 10rpx 0;
	}

	.moto-item text {
		font-size: 14px;
		color: #999999;
	}

	.moto-price {
		color: #FE4B3A;
		font-size: 36rpx;
		font-weight: bolder;
	}

	.moto-item>img {
		width: 200rpx;
		height: 150rpx;
		margin-right: 20rpx;
	}

	.brand-item {
		border-bottom: 1rpx solid #eee;
		padding: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

	}

	.brand-item>img {
		width: 260rpx;
		height: 100rpx;
		margin-right: 40rpx;
	}
</style>